<template>
   <div class="share">
       <div class="sh">分享至</div>
       <div class="icons">
           <div class="fx">  
            <img src="../img/fx1.png" alt="">
           <div>站内好友</div>
           </div>
        
            <div class="fx">  
             <img src="../img/fx2.png" alt="">
            <div>微信好友</div>
            </div>
         
             <div class="fx" >  
              <img src="../img/fx3.png" alt="">
             <div>朋友圈</div>
             </div>
          
              <div class="fx">  
               <img src="../img/fx4.png" alt="">
              <div>QQ好友</div>
              </div>
           
               <div class="fx">  
                <img src="../img/fx5.png" alt="">
               <div>QQ空间</div>
               </div>
            
                <div class="fx">  
                 <img src="../img/fx6.png" alt="">
                <div>复制链接</div>
                </div>
             
           
           
          
       </div>
       <div class="btn">取消</div>
   </div>
</template>

<script>
    export default {
        name: 'share',
        data() {
            return {
               
            }
        },
    }
</script>

<style  scoped="scoped" lang="less">
    .share{
        position: absolute;
        bottom:0;
        border-radius: 12px 12px 0px 0px;
        text-align: center;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(187, 187, 187, 100);
    }
    .sh,.fx>div{text-align: center;}
    .sh{
        margin: 10px;
    }
    .icons{display: flex;justify-content: flex-start;}
   
   /* 组件中的样式是相互传递的，后面的样式会对前面的样式产生覆盖效果*/
 .icons img{
        width: 45px;height: 40px;margin:20px 10px ;
    }
    .btn{
        margin:40px auto 10px;
    }
</style>
